<template>
  <div class="warn-dialog">
    <grid-layout :layout="layout">
      <template #left>
        <div class="warn-dialog-left">
          <div class="player-box">
            <div class="player-box-title">
              <div class="player-box-title-text">查看视频</div>
              <div class="player-box-btn">
                <a-button :class="{ active: !realshow }" @click="realshow = false"> 告警视频 </a-button>
                <a-button :class="{ active: realshow }" @click="realshow = true"> 实时视频 </a-button>
                <!--              <a-button>视频轨迹</a-button>-->
              </div>
            </div>
            <div class="player-box-wrap" style="width: 100%; height: calc(100% - 80px)" @click="playerClick">
              <a-icon
                v-show="!playing"
                theme="filled"
                type="play-circle"
                style="font-size: 64px; color: rgba(200, 200, 200, 0.8)"
                class="player-control"
                :class="{ hide: hidePlayerControl }"
              />
              <img v-show="!playing" :src="details.catch_full_img_url" class="player-cover" />
              <nvr-video
                v-if="playing"
                ref="nvrVideo"
                style="width: 100%; height: 100%"
                :options="nvrOption"
                :playback-data="nvrData"
                :realshow="realshow"
                :autoplay="false"
                @mounted="playVideo"
                @playEnd="onPlayEnd"
              />
            </div>
          </div>
        </div>
      </template>
      <template #right>
        <div class="warn-dialog-right">
          <info-title style="margin-bottom: 20px">告警信息</info-title>
          <div class="info-card">
            <img :src="details.catch_full_img_url" class="info-card-img" @click="viewImg(details.catch_full_img_url)" />
            <div class="info-card-list">
              <descriptions-group
                :descriptionsList="[
                  { label: '告警类型', key: 'warn_type_name' },
                  { label: '告警位置', key: 'warn_place' },
                  { label: '告警时间', key: 'warn_time' },
                  { label: '告警描述', key: 'warn_content' },
                ]"
                :dataSource="details"
              />
            </div>
          </div>
          <info-title style="margin: 20px 0 10px">治理信息</info-title>
          <a-row>
            <a-col :span="12">
              <text-row-tight label="专职网格员" :text="details.people_name" />
            </a-col>
            <a-col :span="12">
              <text-row-tight label="联系方式" :text="details.people_phone" />
            </a-col>
          </a-row>
          <info-title style="margin: 20px 0 10px">处置流程</info-title>
          <!--          <event-time-line-->
          <!--            :data-list="recordList"-->
          <!--            :style="{-->
          <!--              height: showHandleBtn ? '243px' : '317px',-->
          <!--              overflow: 'hidden auto',-->
          <!--              padding: '5px 0 0',-->
          <!--            }"-->
          <!--          />-->
        </div>
      </template>
      <template #bottom>
        <div class="warn-dialog-btn">
          <a-button v-if="showHandleBtn" @click="handleWarn(1)">指派</a-button>
          <!--        <a-button @click="handleWarn(4)">无效</a-button>-->
        </div>
      </template>
    </grid-layout>
  </div>
</template>

<script>
import get from 'lodash-es/get.js';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import InfoTitle from '@gis/lib/components/splitter/info-title.vue';
import NvrVideo from '@gis/lib/components/player/index.jsx';
// import EventTimeLine from '@/views/event-manage/components/event-time-line';
import timeFormat from '@gis/lib/utils/time-format';
import { viewImages } from '@gis/lib/components/img-viewer/viewer.js';
import { alarmDevDetails, getEventInfoDetail } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { openMsgWarnHandleDialog } from '../../../views/alarm/msg-warn-handle.js';

export default {
  name: 'warn-dialog',
  components: { NvrVideo, InfoTitle, GridLayout },
  props: {
    data: { type: [Object, String], default: () => ({}) },
  },
  data() {
    return {
      layout: [
        { name: 'left', colSpan: 14 },
        { name: 'right', colSpan: 10 },
      ],
      details: {},
      recordList: [],
      hidePlayerControl: false,
      playing: false,
      realshow: false,
    };
  },
  computed: {
    showHandleBtn() {
      return this.details.handle_status == 0;
    },
    nvrData() {
      return {
        id: this.details.catch_video_url,
        name: this.details.warn_describe,
        beginTime: timeFormat.getOffsetDate(this.details.warn_time, {
          offset: -10,
          unit: 'seconds',
          timeType: 'fullDate',
        }),
        endTime: timeFormat.getOffsetDate(this.details.warn_time, {
          offset: 20,
          unit: 'seconds',
          timeType: 'fullDate',
        }),
      };
    },
    nvrOption() {
      return {
        code: this.details.catch_video_url,
        name: this.details.warn_describe,
      };
    },
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(data) {
        if (typeof data === 'string') {
          this.getDataAsync(data);
        } else {
          this.setDetailsData(data);
        }
      },
    },
  },
  methods: {
    async getDataAsync(id) {
      const params = { id };
      const data = this.handleCommonResult(await alarmDevDetails(params), { defaultValue: {} });
      this.setDetailsData(data);
    },
    async getRecordList(event_id) {
      const { area_code } = useUserInfoStore();
      const params = {
        area_code: area_code,
        event_id,
      };
      const data = this.handleCommonResult(await getEventInfoDetail(params));
      this.recordList = data ? data.record_list || [] : [];
    },
    setDetailsData(data = {}) {
      this.details = data || {};
      if (this.details.relation_id) {
        this.getRecordList(this.details.relation_id);
      }
    },
    playVideo() {
      this.$refs.nvrVideo.play();
    },
    pauseVideo() {
      this.$refs.nvrVideo.pause();
    },
    playerClick() {
      if (!this.playing) {
        this.hidePlayerControl = true;
        /* 播放按钮渐隐动画时长500毫秒 */
        setTimeout(() => {
          this.playing = true;
        }, 500);
      }
    },
    onPlayEnd() {
      this.playing = false;
      this.hidePlayerControl = false;
    },
    viewImg(url) {
      viewImages(url);
    },
    handleWarn(type) {
      openMsgWarnHandleDialog(
        {
          mode: { 1: '指派', 4: '无效' }[type],
          data: this.details,
          onAssignSuccess: (val) => {
            const event_id = get(val, 'data', '');
            this.getRecordList(event_id);
          },
        },
        {
          title: { 1: '转为事件并指派', 4: '标记为无效' }[type],
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
.warn-dialog {
  height: 670px;
  .warn-dialog-left,
  .warn-dialog-right {
    height: 100%;
    padding: 0;
  }
  .info-card {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    .info-card-img {
      flex: none;
      width: 150px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .player-box {
    height: 100%;
    //background: rgba(255, 255, 255, 0.1);
    //border: 1px solid rgba(255, 255, 255, 0.35);
    //padding: 11px;
    .player-box-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      padding: 11px 0 17px;
      .player-box-title-text {
        font-size: 18px;
        color: #fff;
      }
      .player-box-btn {
        .ant-btn {
          &.active {
            color: #f0f0f0;
            background: rgba(132, 255, 237, 0.75);
            border-color: rgba(132, 255, 237, 0.75);
          }
        }
      }
    }
    .player-box-wrap {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      .player-control {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3002;
        transform: translate(-50%, -50%) scale(1);
        visibility: visible;
        opacity: 1;
        transition: visibility ease 0.5s, opacity ease 0.5s, transform ease 0.5s;
        &.hide {
          transform: translate(-50%, -50%) scale(3);
          visibility: hidden;
          opacity: 0;
        }
      }
      .player-cover {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3001;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        user-select: none;
        pointer-events: none;
      }
    }
  }
  .warn-dialog-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
<style lang="less">
.warn-dialog-handle-dialog {
}
</style>
